import { NPopover, NSpace } from 'naive-ui'
import { defineComponent, ref, type PropType, type VNodeChild } from 'vue'

export default defineComponent({
  name: 'EllipseAction',
  props: {
    max: {
      type: Number,
      default: 4
    },
    actions: {
      type: Function as PropType<() => VNodeChild[]>,
      required: true
    }
  },
  render() {
    const { max, actions } = this.$props
    const nodes = actions()
    const length = nodes.length
    const more = length > max
    const showActions = more ? nodes.slice(0, max) : nodes
    const visible = ref(false)

    return (
      <NSpace
        align="end"
        inline
        wrap={false}
      >
        <div
          style={{
            display: 'inline-grid',
            gridTemplateColumns: 'repeat(2, auto)',
            justifyContent: 'center',
            alignContent: 'center',
            gap: '8px'
          }}
        >
          {showActions}
        </div>

        {more ? (
          <NPopover
            showArrow={false}
            placement="bottom-end"
            show={visible.value}
            onUpdateShow={(v) => (visible.value = v)}
          >
            {{
              trigger: () => (
                <span style="color: #6CB187; cursor: pointer; line-height: 2.5">...</span>
              ),
              default: () => (
                <NSpace
                  vertical
                  // @ts-ignore
                  onClick={() => (visible.value = false)}
                >
                  {nodes.slice(max)}
                </NSpace>
              )
            }}
          </NPopover>
        ) : null}
      </NSpace>
    )
  }
})
